<template>
  <div style="width: 100%; height: calc(100% - 50px);">


    <!--    <Descriptions size="small" :title="totalTitle"-->
    <!--      style="margin-top: 10px;">-->
    <!--      <DescriptionsItem label="选择创建时间">-->
    <!--        <MonthPicker placeholder="请选择月份" @change="monthChangeFn" format="YYYY-MM"></MonthPicker>-->
    <!--      </DescriptionsItem>-->
    <!--    </Descriptions>-->


    <!-- v-on="gridEvents" overflow: hidden -->
    <vxe-grid ref="tableRef" v-bind="gridOptions">
      <template #toolbar_buttons>
        <div style="display: flex;align-items: center;margin-left: 15px;">
          <span class="table-header-btn" @click="addExcludeFn">提交排除抽成</span>
          <span class="table-header-btn" @click="getExcludeFn">查看已排除数据</span>

        </div>
      </template>
      <template #action="{ row }">
        <TableAction outside :actions="getActions(row)" />
      </template>
      <template #state="{ row }">
        <Tag :color="paseTags(row).color">{{ paseTags(row).val }}</Tag>
      </template>

    </vxe-grid>
    <div style="width: 100%;margin-top: 8px;margin-bottom: 8px;background: white;text-align: center;">
      <Button type="primary" @click="submitFn">提起审批</Button>

    </div>

    <FormModal @register="register" @success="handleSuccess" />
    <ExcludeDataModal @register="excludeModal[0]" @success="handleSuccess"></ExcludeDataModal>
    <ExcludeAddModal @register="excludeAddModal[0]" @success="handleSuccess"></ExcludeAddModal>
  </div>
</template>
<script lang="ts" setup>

import ExcludeDataModal from './ExcludeDataModal.vue';

import ExcludeAddModal from './ExcludeAddModal.vue';

import { BasicTable, useTable, TableAction } from '@/components/Table';
import {
  ywZhongBuCancel, ywApprovalRemove, ywZhongBuWaitList
} from '@/api/sys/approval';

import {
  BasicTableProps,
  VxeBasicTable,
  VxeGridInstance,
  VxeGridListeners,
  VxeTableDefines,
} from '@/components/VxeTable';
import {
  vxeTableColumns,
  vxeTableFormSchema,
  paseTags
} from './role.data';
// import { InfoCircleOutlined } from '@ant-design/icons-vue';
import { Tag, Descriptions, DescriptionsItem, Button } from 'ant-design-vue';
import { reactive, ref, unref, onMounted } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import FormModal from './FormModal.vue';

defineOptions({ name: 'MouldList' });
const { createMessage } = useMessage();
const userStore = useUserStore();

const [register, { openModal, closeModal }] = useModal();

const loading = ref(false);
const visible = ref(false);
const applyViewShow = ref(false);
const excludeModal = useModal();
const excludeAddModal = useModal();
const totalObj = ref({ salesmanDeptList: [] })
const totalTitle = ref("");

const tableRef = ref<VxeGridInstance>();

const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: vxeTableColumns,
  filterConfig: {
    remote: true,
  },

  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true,
  },
  formConfig: {
    // enabled: true,
    items: vxeTableFormSchema,
  },
  pagerConfig: {
    // pageSize: 20,
  },
  proxyConfig: {
    props: {
      result: 'data.list',
      list: 'data.list',
      total: 'data.totalResult',
      message: 'message',
    },
    filter: true,
    ajax: {
      query: ({ page, form, filters }) => {
        return findPageList(page, form, filters);
      },
      // queryAll: async ({ form }) => {
      //   return await demoListApi(form);
      // },
    },
  },
});

function findPageList(page, form, filterList?: VxeTableDefines.FilterCheckedParams<any>[]) {
  let json = {};
  if (filterList && filterList.length) {
    filterList.forEach((e) => {
      const value = e.datas[0];
      let field = e.field;
      json[field + 'Like'] = value;
    });
  }
  // console.log("----json:", json);
  // ywApproveList xftList
  form.startTime = null;
  form.endTime = null;
  if (form.timeArr && form.timeArr.length > 0) {
    let start = form.timeArr[0];
    let end = form.timeArr[1];
    let m = start.substr(0, 7);
    form.startTime = start;
    form.endTime = end;

  } else {
    totalObj.value.salesmanDeptList = [];
  }
  return ywZhongBuWaitList({
    page: page.currentPage,
    pageSize: page.pageSize,
    ...form,
    ...json,
  });
}

const findList = (filterList?: VxeTableDefines.FilterCheckedParams<any>[]) => {
  gridOptions.loading = true;
  // 模拟接口
  let queryJson = {};
  if (filterList && filterList.length) {
    filterList.forEach((e) => {
      const value = e.datas[0];
      let field = e.field;
      queryJson[field + 'Like'] = value;
    });
  }

  return new Promise<any[]>((resolve) => {
    let pp = {
      page: { currentPage: 1, pageSize: 20 },
      form: queryJson,
    };

    gridOptions.proxyConfig.ajax.query(pp).then((res) => {
      gridOptions.loading = false;
      let resultObj = {
        result: res.data.list,
        page: {
          total: res.data.totalResult,
        },
      };

      resolve(res);
    });
  });
};




function applyViewOpen() {
  applyViewShow.value = true;
}

function applyViewClose() {
  applyViewShow.value = false;
}

function getUserName(item) {
  let userName = item.userName;
  if (!item.userName) {
    if (item.userType == "manage_user") {
      userName = "经理(空)"
    }

  }
  return userName;
}

//查看审批详情
function applyViewFn(record) {


}

function approveAbolishFn(record: Recordable) {
  //console.log(record);

  ywApprovalRemove(record)
    .then((res) => {
      if (res.code == 200) {
        createMessage.success(res.message);
        tableRef.value.commitProxy('reload');

      } else {
        createMessage.error(res.message);

      }

    })
    .catch((res) => {
      createMessage.error(res.message);
    })
    .finally(() => {
    });
}


onMounted(() => {
})

function getActions(record) {
  let arr = [];
  let userName = userStore.getUserInfo?.userName;
  let role = userStore.getUserInfo?.role;
  let title = "查看";
  let color = "";


  arr.push({
    // icon: 'clarity:note-edit-line',
    label: title,
    color,
    onClick: handleEdit.bind(null, record),
  });



  return arr;
}

function handleCreate() {
  openModal(true, {
    isUpdate: false,
  });
}

function handleEdit(record: Recordable) {
  openModal(true, {
    record
  });
}


function handleClose(record: Recordable) {
  //console.log(record);
  // loading.value = true;
  record.loading = true;
  ywZhongBuCancel(record)
    .then((res) => {
      record.loading = false;
      if (res.code == 200) {
        createMessage.success(res.message);
        tableRef.value.commitProxy('reload');

      } else {
        createMessage.error(res.message);

      }

    })
    .catch((res) => {
      record.loading = false;
      createMessage.error(res.message);
    })
    .finally(() => {
    });
}



function handleSuccess() {
  tableRef.value.commitProxy('reload');
}


function openUserModal(record: Recordable, type) {
  record.openType = type; // type 1 看符合退款条件的数据 2 看已有的数据
}

function submitFn() {

  const selectRecords = tableRef.value.getCheckboxRecords();
  const selectReserveRecords = tableRef.value.getCheckboxReserveRecords();

  let selectList = [...selectRecords, ...selectReserveRecords];

  openModal(true, {
    selectList: unref(selectList),
    type: 1
  });



}

function addExcludeFn() {
  const selectRecords = tableRef.value.getCheckboxRecords();
  const selectReserveRecords = tableRef.value.getCheckboxReserveRecords();

  let selectList = [...selectRecords, ...selectReserveRecords];

  if (selectList.length == 0) {
    createMessage.error('请选择要排除的数据!');
    return;
  }
  excludeAddModal[1].openModal(true, {
    selectList: unref(selectList)
  });

}

function getExcludeFn() {
  excludeModal[1].openModal(true, { types: "钟部经理" })
}

</script>
<style lang="less">
.isReturn_clazz {
  text-align: center;
  cursor: pointer;
}

.count-i {
  width: 200px;
  margin-top: 8px;
}

.count-i-p {
  color: #c65206;
}

.table-header-btn {
  padding-left: 10px;
  color: gray;
  font-size: 12px;
  cursor: pointer;
}
</style>
